---
description:
  Explore projects powered by Nextra, showcasing a diverse range of websites and
  applications built with this powerful Next.js framework, from GraphQL tools to
  JavaScript resources.
---

import { Cards, Image } from 'nextra/components'
import { cloneElement } from 'react'

# Showcase

Projects powered by Nextra

{/* prettier-ignore */}
<Cards>
<>[![React Flow preview](./_logos/react-flow.jpg)](https://reactflow.dev)</>
<>[![Svelte Flow preview](./_logos/svelte-flow.jpg)](https://svelteflow.dev)</>
<>[![Speakeasy preview](./_logos/speakeasy.png)](https://speakeasy.com/docs)</>
<>[![The Graph preview](./_logos/thegraph.jpeg)](https://thegraph.com/docs/en)</>
<>[![GraphQL preview](./_logos/graphql.png)](https://graphql.org)</>
<>[![GraphQL Hive preview](./_logos/graphql-hive.png)](https://the-guild.dev/graphql/hive)</>
<>[![SWR preview](./_logos/swr.png)](https://swr.vercel.app)</>
<>[![COBE preview](./_logos/cobe.png)](https://cobe.vercel.app)</>
<>[![JavaScript Patterns preview](./_logos/javascript-patterns.jpg)](https://javascriptpatterns.vercel.app)</>
<>[![CodeSandbox preview](./_logos/codesandbox.jpg)](https://codesandbox.io/docs/learn/introduction/overview)</>
<>[![DocsGPT preview](./_logos/docsgpt.png)](https://docs.docsgpt.co.uk)</>
<>[![CloudQuery preview](./_logos/cloudquery.svg)](https://cloudquery.io)</>
<>[![Edge Runtime preview](./_logos/edge-runtime.jpeg)](https://edge-runtime.vercel.app)</>
<>[![Sound.xyz preview](./_logos/sound.xyz.png)](https://docs.sound.xyz)</>
<>[![Panda preview](./_logos/panda.png)](https://panda-css.com)</>
<>[![Kuma UI preview](./_logos/kuma-ui.png)](https://kuma-ui.com)</>
<>[![Langfuse Open Source LLM Engineering Platform](./_logos/langfuse.png)](https://langfuse.com)</>
<>[![The Guild Blog preview](./_logos/the-guild.png)](https://the-guild.dev)</>
<>[![GraphQL Yoga preview](./_logos/graphql-yoga.png)](https://the-guild.dev/graphql/yoga-server)</>
<>[![GraphQL Envelop preview](./_logos/graphql-envelop.png)](https://the-guild.dev/graphql/envelop)</>
<>[![GraphQL Inspector preview](./_logos/graphql-inspector.png)](https://the-guild.dev/graphql/inspector)</>
<>[![GraphQL Code Generator preview](./_logos/graphql-codegen.png)](https://the-guild.dev/graphql/codegen)</>
<>[![GraphQL Mesh preview](./_logos/graphql-mesh.png)](https://the-guild.dev/graphql/mesh)</>
<>[![GraphQL Tools preview](./_logos/graphql-tools.png)](https://the-guild.dev/graphql/tools)</>
<>[![GraphQL Modules preview](./_logos/graphql-modules.png)](https://the-guild.dev/graphql/modules)</>
<>[![GraphQL ESLint preview](./_logos/graphql-eslint.png)](https://the-guild.dev/graphql/eslint)</>
<>[![GraphQL Config preview](./_logos/graphql-config.png)](https://the-guild.dev/graphql/config)</>
<>[![GraphQL Scalars preview](./_logos/graphql-scalars.png)](https://the-guild.dev/graphql/scalars)</>
<>[![GraphQL Shield preview](./_logos/graphql-shield.png)](https://the-guild.dev/graphql/shield)</>
<>[![GraphQL SOFA preview](./_logos/graphql-sofa.png)](https://the-guild.dev/graphql/sofa-api)</>
<>[![Apollo Angular preview](./_logos/apollo-angular.png)](https://the-guild.dev/graphql/apollo-angular)</>
<>[![GraphQL SSE preview](./_logos/graphql-sse.png)](https://the-guild.dev/graphql/sse)</>
<>[![GraphQL WS preview](./_logos/graphql-ws.png)](https://the-guild.dev/graphql/ws)</>
<>[![feTS preview](./_logos/fets.png)](https://the-guild.dev/openapi/fets)</>
<>[![JavaScript Code Challenges preview](./_logos/jscodechallenges.png)](https://jscodechallenges.vercel.app)</>
<>[![React Cosmos preview](./_logos/react-cosmos.png)](https://reactcosmos.org)</>
<>[![Typia preview](./_logos/typia.png)](https://typia.io)</>
<>[![Nestia preview](./_logos/nestia.png)](https://nestia.io)</>
<>[![Safe preview](./_logos/safe-core.png)](https://docs.safe.global)</>
<>[![Auth.js preview](./_logos/authjs.png)](https://authjs.dev)</>
<>[![imgix preview](./_logos/imgix.png)](https://docs.imgix.com)</>
<>[![AnythingLLM preview](./_logos/anythingllm.png)](https://anythingllm.com)</>
<>[![Redbrick preview](./_logos/redbrick.jpg)](https://wiki.redbrick.land)</>
<>[![Linito preview](./_logos/linito.png)](https://www.linito.io/docs)</>
<>[![Makeform preview](./_logos/makeform.png)](https://www.makeform.ai/help)</>
<>[![EmbedPDF preview](./_logos/embedpdf.png)](https://www.embedpdf.com)</>
<>[![Reactylon preview](./_logos/reactylon.png)](https://www.reactylon.com/docs)</>
</Cards>

export default function MdxLayout(props) {
  return cloneElement(props.children, {
    components: {
      img: props => (
        <Image {...props} className="object-cover [aspect-ratio:12/6.3]" />
      ),
      a({ children, href }) {
        const { alt } = children.props
        return (
          <Cards.Card
            href={href}
            title={alt.replace(/ preview$/i, '')}
            target="_blank"
            rel="noreferrer"
            arrow
            className="!no-underline"
          >
            {children}
          </Cards.Card>
        )
      },
      p(props) {
        return (
          <p
            {...props}
            className="mb-16 mt-4 text-center text-lg text-gray-600 dark:text-gray-400"
          />
        )
      }
    }
  })
}
